<template>
  <uni-popup type="bottom" ref="selectAddressRef">
    <view class="select-address-box">
      <view class="header-box">
        <view></view>
        <view class="title-box">选择所在地区</view>
        <view class="close-icon" @tap="close">
          <view class="iconfont icon-a-Shutdown-01">X</view>
        </view>
      </view>
      <view class="main-box">
        <view class="address-info">
          <view class="address-item" @tap="setSelectStatus(0)">
            <view class="strip-item">
              <view
                :class="{
                  'show-line': address.province,
                  active: address.province
                }"
              ></view>
            </view>
            <view
              class="name-box"
              :class="{
                active: selectStatus == 0
              }"
            >
              <text v-if="address.province">
                {{ address.province }}
              </text>
              <text v-else>请选择所在省份</text>
            </view>
            <view class="icon-box">
              <view class="iconfont icon-xiangyou">
                {{ '>' }}
              </view>
            </view>
          </view>
          <view
            v-if="address.province"
            class="address-item"
            @tap="setSelectStatus(1)"
          >
            <view class="strip-item">
              <view
                :class="{
                  'show-line': address.city,
                  active: address.city
                }"
              ></view>
            </view>
            <view
              class="name-box"
              :class="{
                active: selectStatus == 1
              }"
            >
              <text v-if="address.city">{{ address.city }}</text>
              <text v-else>请选择所在城市</text>
            </view>
            <view class="icon-box">
              <view class="iconfont icon-xiangyou">
                {{ '>' }}
              </view>
            </view>
          </view>
          <view
            v-if="address.city"
            class="address-item"
            @tap="setSelectStatus(2)"
          >
            <view class="strip-item last-strip-item">
              <view
                :class="{
                  'show-line': showStreet,
                  active: address.area
                }"
              ></view>
            </view>
            <view
              class="name-box"
              :class="{
                active: selectStatus == 2
              }"
            >
              <text v-if="address.area">{{ address.area }}</text>
              <text v-else>请选择所在区/县</text>
            </view>
            <view class="icon-box">
              <view class="iconfont icon-xiangyou">
                {{ '>' }}
              </view>
            </view>
          </view>
          <view
            v-if="showStreet"
            class="address-item"
            @tap="setSelectStatus(3)"
          >
            <view class="strip-item last-strip-item">
              <view
                :class="{
                  active: address.street
                }"
              ></view>
            </view>
            <view
              class="name-box"
              :class="{
                active: selectStatus == 3
              }"
            >
              <text v-if="address.street">
                {{ address.street }}
              </text>
              <text v-else>请选择所在乡/镇</text>
            </view>
            <view class="icon-box">
              <view class="iconfont icon-xiangyou">
                {{ '>' }}
              </view>
            </view>
          </view>
        </view>
        <view class="address-select-box">
          <scroll-view
            class="content-box"
            :style="{ height: scrollHeight }"
            scroll-y="true"
          >
            <view v-if="selectStatus === 0">
              <view class="select-tip">请选择省份</view>
              <view
                class="select-item"
                :class="{
                  active: activeProvinvial === i.name
                }"
                v-for="i in provinvial"
                :key="i.code"
                @tap="changeProvinvial(i)"
              >
                {{ i.name }}
              </view>
            </view>
            <view v-else-if="selectStatus === 1">
              <view class="select-tip">请选择城市</view>
              <view
                class="select-item"
                :class="{
                  active: activeCity === i.name
                }"
                v-for="i in citys"
                :key="i.code"
                @tap="changeCity(i)"
              >
                {{ i.name }}
              </view>
            </view>
            <view v-else-if="selectStatus === 2">
              <view class="select-tip">请选择区/县</view>
              <view
                class="select-item"
                :class="{
                  active: activeArea === i.name
                }"
                v-for="i in areas"
                :key="i.code"
                @tap="changeArea(i)"
              >
                {{ i.name }}
              </view>
            </view>
            <view v-else>
              <view class="select-tip">请选择乡/镇</view>
              <view
                class="select-item"
                :class="{
                  active: activeStreet === i.name
                }"
                v-for="i in streets"
                :key="i.code"
                @tap="changeStreet(i)"
              >
                {{ i.name }}
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
// 替换json文件地址
const provinvialUrl = 'https://cos.wkea.cn/static/provinces.json';
const cityUrl = 'https://cos.wkea.cn/static/cities.json';
const areaUrl = 'https://cos.wkea.cn/static/areas.json';
const streetsUrl = 'https://cos.wkea.cn/static/streets.json';

export default {
  name: 'lcw-select-address',
  emits: ['change'],
  props: {
    address: {
      type: Object,
      require: true,
      default: () => ({
        province: '',
        city: '',
        area: '',
        street: ''
      })
    }
  },
  data() {
    return {
      //全部数据
      provinvial: [], // 省
      cityData: [],
      areaData: [],
      streetsData: [],
      // 筛选后的数据
      citys: [], // 城市
      areas: [], // 区/县
      streets: [], // 镇
      // 选择的省、市、区具体名称
      activeProvinvial: '', // 选择中的省份
      activeCity: '', // 选中的城市
      activeArea: '', // 选中的区县
      activeStreet: '', // 选中的乡镇
      //  0 1 2 3 当前正在选择 省 市 区 镇
      selectStatus: 0
    };
  },
  computed: {
    // 高度计算
    scrollHeight() {
      let height = 910;
      if (this.address.province) {
        height -= 80;
      }
      if (this.address.city) {
        height -= 80;
      }
      if (this.address.area) {
        height -= 80;
      }
      return height + 'rpx';
    },
    // 显示第四级
    showStreet() {
      return (
        this.selectStatus === 3 || (this.activeArea && 'street' in this.address)
      );
    }
  },
  async beforeMount() {
    await Promise.all([this.getProvinvial(), this.getCity(), this.getArea()]);
    if ('street' in this.address) {
      await this.getStreets();
    }
    // 编辑时存在数据
    if (this.address.province) {
      const provinceItem = this.provinvial.find(
        i => i.name == this.address.province
      );
      this.changeProvinvial(provinceItem);
    }
    if (this.address.city) {
      const cityItem = this.cityData.find(i => i.name == this.address.city);
      this.changeCity(cityItem);
    }
    if (this.address.area) {
      const areaItem = this.areaData.find(i => i.name == this.address.area);
      this.changeArea(areaItem);
    }
    if (this.address.street) {
      const streetItem = this.streetsData.find(
        i => i.name == this.address.street
      );
      this.changeStreet(streetItem);
    }
  },
  methods: {
    // 更新正在选择内容的标记
    setSelectStatus(newSelectStatus) {
      this.selectStatus = newSelectStatus;
      console.log(this.selectStatus);
      // if()
    },
    // 关闭 popup
    close() {
      this.$refs.selectAddressRef.close();
    },
    // 打开  popup
    open() {
      this.$refs.selectAddressRef.open();
    },
    // 选择省
    changeProvinvial(i) {
      if (i.name !== this.address.province) {
        this.activeCity = '';
        this.activeArea = '';
        this.activeStreet = '';
        const newAddress = {
          province: i.name,
          city: '',
          area: ''
        };
        if ('street' in this.address) {
          newAddress.street = '';
        }
        this.$emit('change', newAddress);
      }
      this.activeProvinvial = i.name;
      this.citys = this.cityData.filter(item => item.provinceCode === i.code);
      this.selectStatus = 1;
    },
    // 选择市
    changeCity(i) {
      if (i.name !== this.address.city) {
        this.activeArea = '';
        this.activeStreet = '';
        const newAddress = {
          province: this.address.province,
          city: i.name,
          area: ''
        };
        if ('street' in this.address) {
          newAddress.street = '';
        }
        this.$emit('change', newAddress);
      }
      this.activeCity = i.name;
      this.areas = this.areaData.filter(item => item.cityCode === i.code);
      this.selectStatus = 2;
    },
    // 选择区县
    changeArea(i) {
      if (i.name !== this.address.area) {
        this.activeStreet = '';
        const newAddress = {
          province: this.address.province,
          city: this.address.city,
          area: i.name
        };
        if ('street' in this.address) {
          newAddress.street = '';
        }
        this.$emit('change', newAddress);
      }
      this.activeArea = i.name;
      if ('street' in this.address) {
        this.selectStatus = 3;
        this.streets = this.streetsData.filter(
          item => item.areaCode === i.code
        );
      } else {
        this.close();
      }
    },
    // 选择乡镇
    changeStreet(i) {
      if (i.name !== this.address.street) {
        this.$emit('change', {
          ...this.address,
          street: i.name
        });
      }
      this.activeStreet = i.name;
      this.close();
    },
    // 省份数据获取
    async getProvinvial() {
      const res = await uni.request({
        url: provinvialUrl
      });
      this.provinvial = res[1].data;
    },
    // 城市数据获取
    async getCity() {
      const res = await uni.request({
        url: cityUrl
      });
      this.cityData = res[1].data;
    },
    // 区县数据
    async getArea() {
      const res = await uni.request({
        url: areaUrl
      });
      this.areaData = res[1].data;
    },
    // 镇 社区
    async getStreets() {
      const res = await uni.request({
        url: streetsUrl
      });
      this.streetsData = res[1].data;
    }
  }
};
</script>

<style lang="scss">
.select-address-box {
  height: 1100rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background-color: #fff;
  padding: 30rpx 0;

  .header-box {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40rpx;
    padding: 0 20rpx;

    > .title-box {
      font-size: 32rpx;
    }

    .iconfont {
      color: #72899b;
    }
  }

  .main-box {
    .address-info {
      padding: 0 20rpx;

      > .address-item {
        display: flex;
        align-items: center;
        height: 80rpx;

        .strip-item {
          color: #333;
          margin-right: 48rpx;
          position: relative;

          > view {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            border: 2rpx solid #086df7;
            transition: all 0.25s;
            box-sizing: border-box;
          }

          .show-line {
            &::after {
              content: '';
              position: absolute;
              top: 100%;
              left: 50%;
              width: 2rpx;
              height: 69rpx;
              background-color: #086df7;
              transform: translateX(-50%);
            }

            /* #ifndef H5 */
            &::after {
              transform: translateX(-50%);
            }
            /* #endif */
          }

          .active {
            background: #086df7;
          }
        }

        .name-box {
          font-size: 26rpx;
          flex: 1;
        }

        .active {
          color: #086df7;
        }

        .icon-box {
          .iconfont {
            font-size: 24rpx;
            color: #72899b;
          }
        }
      }
    }

    .address-select-box {
      padding: 20rpx 20rpx;
      border-top: 2rpx solid #d4d4d4;

      .content-box {
        height: 600rpx;

        .select-tip {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          padding-bottom: 20rpx;
        }

        .select-item {
          padding: 20rpx 20rpx;
          font-size: 26rpx;
          color: #333;
        }

        .active {
          color: #086df7;
        }
      }
    }
  }
}
</style>
